'use strict';
import React, {
    Component
} from 'react'
import {
    ControlLabel,
    FormControl,
    HelpBlock,
    FormGroup,
    Button,
    Table,
    Pager,
    Pagination,
    Modal,
    Form
} from 'react-bootstrap'
import Page from './common/page'
import FieldGroup from './common/fieldGroup'
import {
    Link,
} from 'react-router'

export default class cooperativePartner extends Component {
    constructor(props){
        super(props);
        this.state = {
            pageNum: 1,
            tableData: {},
            trDate: {}
        }
    }

    componentDidMount(){
        this.getData(this.state.pageNum);
    }

    /**
     * 获取列表数据
     */
    getData(num){
        let url = '/caseDisplay/page/'+num+'/20';
        let title = document.querySelector('#title').value;
        if(title){
            url += '?title='+title
        }
        $.ajax({
            url: url,
            type: 'get',
            dataType: "json",
            success: function(data){
                if(data.code==200){
                    this.setState({tableData:data.data?data.data:{},pageNum:num})
                }else{
                    alert(data.msg);
                }
            }.bind(this)
        });
    }
    /**
     * 删除学校
     * @param e
     */
    delete(trDate, e){
        this.setState({trDate:trDate});
        this.open();
    }

    /**
     * 点击确定删除按钮
     */
    isDelete(){
        let formData = new FormData();
        formData.append('ids',this.state.trDate.id);
        $.ajax({
            url: '/caseDisplay/delete',
            type: 'post',
            data: formData,
            dataType: "json",
            timeout: 0,//请求时间
            contentType:false,//则数据再发送器会被转换成查询字符串通过false来回避
            processData: false,//禁发送数据格式自动转换
            success: function(data){
                if(data.code==200){
                    alert('操作成功！');
                    this.close();
                    this.getData(this.state.tableData.list.length==1?this.state.pageNum-1:this.state.pageNum);
                }else{
                    alert(data.msg);
                    this.close();
                }
            }.bind(this)
        });
    }

    close() {
        this.setState({ showModal: false });
    }
    open() {
        this.setState({ showModal: true });
    }
    render() {
        let {tableData} = this.state;
        let tbodyHtml = tableData.list?tableData.list.map(function (value, index) {
            return (
                <tr>
                    <td>{index+1}</td>
                    <td>{value.title}</td>
                    <td>{value.introduce}</td>
                    <td>{value.top==0?'否':'是'}</td>
                    <td>{value.isShow==0?'否':'是'}</td>
                    <td>{value.updateTime}</td>
                    <td>
                        <Link to={"/home/article/2/"+value.id}>
                            <Button bsStyle="warning" style={{marginRight:'10px'}}>编辑</Button>
                        </Link>
                        <Button bsStyle="danger" style={{marginRight:'10px'}} onClick={this.delete.bind(this, value)}>删除</Button>
                    </td>
                </tr>
            )
        }.bind(this)):[];
        return (
            <div className='schoolPartner'>
                <Form inline>
                    <FieldGroup id="title" style={{width:'200px',float:'left'}} type="text"  placeholder="请输入标题搜索" maxLength="100"/>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <Button bsStyle="info" onClick={this.getData.bind(this,'1')}>搜索</Button>
                    <Link to="/home/article/2" style={{float:'right'}} ><Button bsStyle="info" >新增学校</Button></Link>
                </Form>

                <Table responsive style={{marginTop:'20px'}}>
                    <thead>
                        <tr>
                            <th style={{width:'5%'}}>#</th>
                            <th style={{width:'15%'}}>学校名称</th>
                            <th style={{width:'34%'}}>简介</th>
                            <th style={{width:'8%'}}>置顶</th>
                            <th style={{width:'8%'}}>显示</th>
                            <th style={{width:'15%'}}>操作时间</th>
                            <th style={{width:'15%'}}>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {tbodyHtml}
                    </tbody>
                </Table>
                <Modal show={this.state.showModal} onHide={this.close.bind(this)}>
                    <Modal.Header closeButton>
                        <Modal.Title>删除确定框</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        是否确认删除这条学校信息？
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={this.close.bind(this)}>取消</Button>
                        <Button bsStyle="primary" onClick={this.isDelete.bind(this)}>确定</Button>
                    </Modal.Footer>
                </Modal>
                <Page
                    pages={tableData.pages}
                    pageNum={tableData.pageNum}
                    prePage={tableData.prePage}
                    nextPage={tableData.nextPage}
                    itemclick={this.getData.bind(this)}
                />
            </div>
        )
    }
}
